import 'package:flutter/material.dart';
import 'package:wechat/pages/chat/search_page.dart';
import 'package:wechat/pages/const.dart';

import 'chat_model.dart';

class SearchBar extends StatelessWidget {
  final List<ChatModel> datas;
  const SearchBar({Key? key, required this.datas}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(builder: (BuildContext ctx) {
            return SearchPage(datas: datas,);
          }),
        );
      },
      child: Container(
        height: 54,
        color: wechatThemeColor,
        padding: EdgeInsets.all(10),
        child: DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.white,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image(
                image: AssetImage("images/chat/放大镜.png"),
                width: 20,
                color: Colors.red,
              ),
              SizedBox(
                width: 5,
              ),
              Text(
                "搜索",
                style: TextStyle(fontSize: 15, color: Colors.red),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SearchBarText extends StatefulWidget {
  final ValueChanged<String> inputText;
  const SearchBarText({Key? key, required this.inputText}) : super(key: key);

  @override
  State<SearchBarText> createState() => _SearchBarTextState();
}

class _SearchBarTextState extends State<SearchBarText> {
  TextEditingController _controller = TextEditingController();
  bool _showClear = false;
  _textFieldChange(String text) {
    if (text.length == 0) {
      _showClear = false;
    }else {
      _showClear = true;
    }
    setState(() {
      widget.inputText(text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: wechatThemeColor,
      height: 88,
      child: Column(
        children: [
          const SizedBox(height: 40),
          Expanded(
            child: Container(
              // color: Colors.blue,
              height: 35,
              child: Row(
                children: [
                  Container(
                    //color: Colors.white,
              padding: EdgeInsets.only(left: 5, right: 5),
                    margin: EdgeInsets.all(8),
                    width: ScreenWidth(context)-70,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.white,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        const Image(image: AssetImage('images/chat/放大镜.png'), width: 20, color: Colors.grey,),
                        Expanded(
                          child: TextField(
                            controller: _controller,
                            onChanged: _textFieldChange,
                            cursorColor: wechatThemeColor,
                            decoration: InputDecoration(
                              hintText: "搜索",
                              contentPadding: EdgeInsets.only(left: 5,right: 5, bottom: 12),
                              border: InputBorder.none,
                            ),
                          )
                        ),
                        _showClear ? GestureDetector(
                          onTap: () {
                            _controller.clear();
                            _textFieldChange('');
                          },
                            child: Icon(Icons.cancel, color: Colors.grey,)
                        ) : Container(),
                      ],
                    ),
                  ),
                  Expanded(
                    // color: Colors.yellow,
                    // width: 60,
                    child: TextButton(
                      child: Text("取消", style: TextStyle(color: Colors.grey),),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
